<template>
  <div class="about">
    <h1>虚拟滚动列表1手动封装</h1>
    <h2>文件导入、导出</h2>
    <div>
      <div>
        <export-excel :list="virtualList.length ? virtualList : items" :tableName="'测试'" />
        <import-excel />
      </div>
      <virtual-scroller-2 :data="items" :height="62" key-prop="id" @change="handleChange">
        <el-table row-key="id" :data="virtualList" height="500px" :span-method="arraySpanMethod">
          <el-table-column prop="mark" label="地区" width="180">

          </el-table-column>
          <el-table-column prop="text" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="text" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="text" label="日期" width="180">

          </el-table-column>

          <el-table-column prop="text" label="日期" width="180">
            <el-table-column prop="text" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="text" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="text" label="日期" width="180">
            </el-table-column>
          </el-table-column>
          <el-table-column prop="text" label="描述" width="180">
            <template slot-scope="{row}">
              <div>
                <span v-if="row.support === 1">认可</span>
                <span v-else-if="row.support === 0">不认可</span>
                <span v-else>暂无操作</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="text" label="日期" width="180">
            <template slot-scope="{row}">
              <div>
                <el-button type="info" size="small" @click="accept(row)">认可</el-button>
                <el-button type="info" size="small" @click="disagree(row)">不认可</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </virtual-scroller-2>
    </div>

    <div>
      <h1>虚拟滚动列表2 npm install vue-virtual-scroller插件</h1>
      <virtual-scroller :list="items">
        <template v-slot="{ item }">
          <h1> {{ item.text }}</h1>
        </template>
      </virtual-scroller>
    </div>


    <div>
      <h1>虚拟滚动列表3 npm install umy-ui插件</h1>
      <u-table :data="items" :height="600" use-virtual :border="false" style="width: 100%">
        <template slot="empty">
          没有查询到符合条件的记录
        </template>
        <el-table-column prop="mark" label="地区" width="180">

        </el-table-column>
        <el-table-column prop="text" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="text" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="text" label="日期" width="180">

        </el-table-column>

        <el-table-column prop="text" label="日期" width="180">
          <el-table-column prop="text" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="text" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="text" label="日期" width="180">
          </el-table-column>
        </el-table-column>
        <el-table-column prop="text" label="描述" width="180">
          <template slot-scope="{row}">
            <div>
              <span v-if="row.support === 1">认可</span>
              <span v-else-if="row.support === 0">不认可</span>
              <span v-else>暂无操作</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="text" label="日期" width="180">
          <template slot-scope="{row}">
            <div>
              <el-button type="info" size="small" @click="accept(row)">认可</el-button>
              <el-button type="info" size="small" @click="disagree(row)">不认可</el-button>
            </div>
          </template>
        </el-table-column>
      </u-table>


    </div>
  </div>


</template>
<script>

import virtualScroller from '@/base-ui/virtual-scroller/VirtualScroller.vue'
import VirtualScroller2 from '@/base-ui/virtual-scroller/VirtualScroller2.vue'
import ExportExcel from '@/base-ui/excel/ExportExcel.vue'
import ImportExcel from '@/base-ui/excel/ImportExcel.vue'

export default {
  name: "首页",
  components: { virtualScroller, VirtualScroller2, ExportExcel, ImportExcel },

  data() {
    return {
      items: [],
      virtualList: [],

    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const list = []
      // 模拟请求数据
      for (let i = 0; i < 10000; i++) {
        list.push({
          id: i,
          text: `我是第${i}个盒子`,
          support: null,
          mark: Math.floor(Math.random() * 5 + 1)
        })
      }


      this.items = list

    },
    handleChange(renderData) {
      this.virtualList = renderData

    },
    accept(row) {
      console.log(row);
      row.support = 1
    },

    disagree(row) {
      console.log(row);
      row.support = 0
    },
    /**
     * 合并列不受影响，但是合并行不行。
      虚拟列表的原理是不渲染那些不在可视范围内的行，比如 1w 行数据只渲染看得见的 20 行， 而合并行的功能是基于页面上可见行进行合并的，如果在合并行的时候还要遍历所有行进行检查合并，就失去了虚拟列表优化滚动性能的意义，所以如果你有使用合并行的功能暂时就没办法使用虚拟列表。
      https://github.com/rsuite/rsuite/issues/2382
      https://github.com/x-extends/vxe-table/issues/970
      */

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // let dataProvider = this.items
      // if (columnIndex === 0) {
      //   const cellValue = row[column.property];
      //   if (cellValue) {
      //     // 上一条数据
      //     const prevRow = dataProvider[rowIndex - 1]
      //     // 下一条数据
      //     let nextRow = dataProvider[rowIndex + 1]
      //     // 当上一条数据等于下一条数据

      //     if (prevRow && prevRow[column.property] === cellValue) {
      //       return { rowspan: 0, colspan: 0 }
      //     } else {
      //       let rowspan = 1
      //       while (nextRow && nextRow[column.property] === cellValue) {
      //         rowspan++
      //         nextRow = dataProvider[rowspan + rowIndex]
      //       }
      //       if (rowspan > 1) {
      //         return { rowspan, colspan: 1 }
      //       }
      //     }
      //   }
      // }
    }
    // arraySpanMethod() { }
  }

}
</script>
